<template>
  <div class="right">
    <div class="temperature">
      <dv-border-box12>
        <h2>月度料蛋比曲线</h2>
        <TemperatureVue></TemperatureVue>
      </dv-border-box12>
    </div>
    <div class="Auxiliary">
      <dv-border-box12>
        <h2>月度辅材</h2>
        <Auxiliary></Auxiliary>
      </dv-border-box12>
    </div>
    <div class="alarm">
      <dv-border-box12>
      <h2>报警记录</h2>
      <Alarm></Alarm>
      </dv-border-box12>
    </div>
  </div>
</template>

<script lang="ts" setup>
import TemperatureVue from "./Right/Temperature.vue";
import Alarm from "./Right/Alarm.vue";
import Auxiliary from "./Right/Auxiliary.vue";


</script>

<style scoped>
.right {
  width: 90%;
  height: 90%;
}

.temperature {
  width: 24vw;
  height: 27.1vh;
  margin-right: 0.5vw;
  /* margin-top: 1vh; */
}

.alarm h2 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: pink;
}

.alarm {
  width: 24vw;
  height: 27vh;
  margin-top: 2vh;
  margin-right: 0.5vw;
}

.temperature h2 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.Auxiliary {
  width: 24vw;
  height: 27.1vh;
  margin-right: 0.5vw;
  margin-top: 2vh;
}

.Auxiliary h2 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

</style>